import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import Home from './pages/Home';
import EncryptionPage from './pages/EncryptionPage';
import SignaturePage from './pages/SignaturePage';
import InlineSignaturePage from './pages/InlineSignaturePage';
import './App.css';

export default function App() {
  const navStyle: React.CSSProperties = {
    display: 'flex',
    gap: '12px',
    padding: '12px 16px',
    borderBottom: '1px solid #eee',
    background: '#fafafa',
    position: 'sticky',
    top: 0,
    zIndex: 10,
  };

  const linkStyle: React.CSSProperties = {
    padding: '8px 14px',
    borderRadius: 8,
    textDecoration: 'none',
    background: '#eef2ff',
    color: '#374151',
    fontWeight: 600,
  };

  return (
    <BrowserRouter>
      <div style={navStyle}>
        <Link to="/" style={linkStyle}>首页</Link>
        <Link to="/encryption" style={linkStyle}>加密/解密</Link>
        <Link to="/signature" style={linkStyle}>签名</Link>
        <Link to="/inline-sign" style={linkStyle}>内嵌式签名</Link>
      </div>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/encryption" element={<EncryptionPage />} />
        <Route path="/signature" element={<SignaturePage />} />
        <Route path="/inline-sign" element={<InlineSignaturePage />} />
      </Routes>
    </BrowserRouter>
  );
}
